<template>
    <div ref="container" id='container' class="v-touch" v-swipe="swipe" swipe-direction="right" swipe-distance="300">
        <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" :css="false">
            <keep-alive :include="includes">
                <router-view ref="page" class="slide-fade page"></router-view>
            </keep-alive>
        </transition>
        <toast></toast>
    </div>
</template>
<script type="text/ecmascript-6">
/**
 * 实现了全局的loading及全局的提示以及全局可调用的缓存 全局loading 在main.js
 * 全局loading任意调用为 this.$loading(true);  分别为显示隐藏
 * 实现了压栈式转场及压栈式自缓存。
 * 全局的toast任意显示调用为 this.$toast()  参数为string||obj  obj={{message: '我是测试',position:'top||bottom',time:3000}} position 默认为居中，time默认为3000ms后提示消失
 * 任何页面缓存可以这样调用 this.$root.$emit('keepAlive', {isKeep: true, name: 'list'}); 注意name为组件名，isKeep设为fals刚取消该页面缓存
 * @Author: lizuping
 * @Date: 2018-05-16 14:04:08
 * @Last Modified by: lizuping
 * @Last Modified time: 2018-08-10 16:13:18
 */
import Vue from 'vue';
import Swipe from './components/v-swipe'; // 滑动手势
import toast from './components/v-toast.vue'; // 滑动手势
Vue.use(Swipe);
export default {
    components: {toast},
    data () {
        return {
            trans: 'slide-fade',
            includes: [], // 存了需要缓存的组件的name(注意不是路由里面配的name,是组件的name)
            routerArr: [], // 里面线性存了路由的历史记录
            loadDom: false, // loading 的dom
            tempIncludes: []
        };
    },
    created () {
        // 确定首页面路由
        this.routerArr.push(this.$route.name);
        this.includes.push(this.$route.name);
        let that = this;
        // 是否缓存页面参数为{isKeep:true,name:'XXX'}  任何页面缓存可以这样调用 this.$root.$emit('keepAlive', {isKeep: true, name: 'list'});
        this.$root.$on('keepAlive', function (obj) {
            function set (arr) {
                console.log(arr);
                let len = arr.length;
                let temp = -1;
                for (let i = 0;i < len;i++) {
                    if (arr[i] === obj.name) {
                        temp = i;
                        break;
                    }
                }
                if (obj.isKeep && temp < 0) {
                    arr.push(obj.name);
                }
                if (!obj.isKeep && temp > -1) {
                    arr.splice(temp, 1);
                }
            }
            set(that.includes);
            set(that.tempIncludes);
        });
    },
    watch: {
        $route (a, b) {
            // 由routerArr来灵活控制控制转场效果 现在实现的是一种压栈式转场
            let temp = -1;
            let n = this.$route.name;
            let r = this.routerArr;
            let len = r.length;
            for (let i = 0;i < len;i++) {
                if (n === r[i]) {
                    temp = i;
                }
            }
            // 首页
            if (temp === 0) {
                r.splice(1, len - 1);
                this.trans = 'slide-fade';
            }
            // in
            if (temp === -1) {
                r.push(n);
                this.trans = 'slide-left';
            }
            // back
            if (temp > 0) {
                r.splice(temp + 1, len - 1 - temp);
                this.trans = 'slide-right';
            }
            let tempArr = JSON.parse(JSON.stringify(this.routerArr));
            let tempi = this.tempIncludes.length;
            for (let i = 0;i < tempi;i++) {
                if (tempArr.indexOf(this.tempIncludes[i]) === -1) {
                    tempArr.push(this.tempIncludes[i]);
                }
            }
            this.includes = tempArr;
        }
    },
    methods: {
        /**
         * 右划回退：
         *  如果上级是原生，调toon协议进行回退操作；
         *  如果是普通h5，用使用js方式；
         *
         */
        swipe (e) {
            if (!window.history || !window.history.state) {
                // 如果首页，调toon协议关闭webview~
                console.log('首页再返回');
            } else {
                this.$router.go(-1);
            }
        },
        beforeEnter (el) {
            el.classList.add('router-slide');
        },
        enter (el, done) {
            el.classList.add(this.trans);
        },
        beforeLeave (el) {
            el.classList.remove(this.trans);
        }
    }
};
</script>

<style >
@import './css/reset.css';
.router-slide {
    opacity: 0.1;
    transition: opacity 0.3s linear;
}
/*动画样式*/
.slide-fade {
    animation: anm-slide-fade 0.3s linear forwards;
}
.slide-right {
    animation: anm-slide-right 0.3s linear forwards;
}
.slide-left {
    animation: anm-slide-left 0.3s linear forwards;
}

@keyframes anm-slide-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes anm-slide-right {
    0% {
        opacity: 0;
        transform: translate3d(-0.4rem, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0);
    }
}
@keyframes anm-slide-left {
    0% {
        opacity: 0;
        transform: translate3d(0.4rem, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0);
    }
}

[v-cloak] {
    display: none;
}
</style>
